<template>
	<view class="container">
		<view class="nav-box df" :style="'padding-top:' + statusBarHeight + 'px;background:rgba(255, 255, 255,' + navbarTrans + ')'">
			<view class="nav-back df" :style="'height:' + titleBarHeight + 'px'" @click="navBack">
				<image src="/static/img/z.png" style="width:34rpx;height:34rpx"></image>
			</view>
			<view v-if="1 == navbarTrans" class="nav-title ohto">{{info.name}}</view>
		</view>
		<view class="bg-mk"></view>
		<view class="bg-mk2"></view>
		<view class="bg-img">
			<lazy-load :src="info.avatar"></lazy-load>
		</view>
		<view class="content-box" :style="'margin-top:' + (statusBarHeight + titleBarHeight) + 'px'">
			<view class="info-box">
				<view class="name">
					<image src="/static/img/qz1.png"></image>
					<text>{{info.name}}</text>
				</view>
				<view class="unm df">
					<text class="tt">{{info.dynamic_count}}</text>
					篇笔记
					<text style="margin:0 12rpx">·</text>
					<text class="tt">{{info.user_count}}</text>
					人加入
					<text style="margin:0 12rpx">·</text>
					更新于 {{info.update_time_str}}
				</view>
				<view class="intro">
					<text user-select="true">{{info.intro}}</text>
				</view>
				<view class="btn-box df">
					<view @click="followCircle" :class="['btn', 'df', 'bg1', info.is_follow && 'dy-hr']">
						<view v-if="!info.is_follow && info.user_count > 0" class="cu-img-group">
							<view v-for="(img,b) in info.user" :key="b" class="cu-img">
								<image :src="img" mode="aspectFill"></image>
							</view>
						</view>
						<text>{{info.is_follow ? "已加入" : "加入圈子"}}</text>
					</view>
					<view @click="shareClick(!0)" :class="['btn', 'df', 'bg2', info.is_follow && 'fx-hr']">
						<image class="icon" src="/static/img/fx1.png"></image>
						<text :hidden="!info.is_follow">分享</text>
					</view>
				</view>
			</view>
			<view class="bar-box df" :style="'top:' + (statusBarHeight + o.titleBarHeight - 1) + 'px'">
				<view v-for="(item,i) in bararr" :key="i" class="bar-item df" @click="barClick" :data-idx="i">
					<text :style="'color:' + (i == baridx ? '#000' : '#999') + ';font-size:' + (i == baridx ? '28rpx' : '26rpx')">{{item}}</text>
					<view :style="'opacity:' + (i == baridx ? 1 : 0)" class="bar-line"></view>
				</view>
			</view>
			<view class="heio df" :style="'height:' + (isFun || 'loading' == loadStatus ? '0px' : '60rpx')">
				<uni-load-more :showText="false" status="loading"></uni-load-more>
			</view>
			<view v-if="isEmpty" class="empty-box df">
				<image src="/static/img/inset/null.png" />
				<view class="e1">{{info.name}} 暂无笔记</view>
				<view class="e2">加入圈子即可发布圈内笔记</view>
			</view>
			<view v-else class="dynamic-box">
				<multigraph :list="list" :page="page" ></multigraph>
			</view>
			<uni-load-more :showText="false" :status="loadStatus"></uni-load-more><!-- v-if="loadStatus=='loadStatus'" -->
		</view>
		<uni-popup ref="sharePopup" type="center" :safe-area="false">
			<view class="share-popup">
				<image class="share-img" src="/static/img/inset/share.jpg"></image>
				<view class="share-tips">
					<text>点击页面右上角</text>
					<image src="/static/img/xcx.png"></image>
					<text style="margin-left:78rpx">即可转发给朋友、分享到朋友圈、复制链接分享等操作。</text>
				</view>
				<view class="share-btn" @click="shareClick(!1)">确认</view>
			</view>
		</uni-popup>
		<!-- Tips Box -->
		<uni-popup ref="tipsPopup" type="top" mask-background-color="rgba(0, 0, 0, 0)">
			<view class="tips-box df" :style="{marginTop: statusBarHeight+44+'px'}">
				<view class="tips-item">{{tips_title}}</view>
			</view>
		</uni-popup>
		<tabbar currentPage="0" :currentMsg="currentMsg" :userAvatar="userAvatar" :currentCid="id"></tabbar>
	</view>
</template>

<script>
	const app = getApp();
	const api = require('@/config/api');
	const util = require('@/utils/util');
	import dynamicBox from '@/components/dynamic/box.vue';
	export default {
		components: {
			dynamicBox
		},
		data() {
			return {
				id: 0,
				titleBarHeight: app.globalData.titleBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				insetUrl: api.insetUrl,
				scrollTop: 0,
				navbarTrans: 0,
				info: {
					name: '...',
					intro: '...',
					user_count: 0,
				},
				bararr: ['推荐', '最新', '最热'],
				baridx: 0,
				list: [],
				page: 1,
				isEmpty: false,
				isFun: true,
				loadStatus: 'more',
				tips_title: '',
			}
		},
		async onLoad(option) {
			uni.showShareMenu();
			await this.$onLaunched;
			let that = this;
			if (option.id && option.id > 0) {
				that.id = option.id;
				that.getCircleDetails();
			} else {
				that.tips_title = '未找到圈子或圈子异常！';
				that.$refs.tipsPopup.open();
				setTimeout(function() {
					that.$refs.tipsPopup.close();
					that.navBack();
				}, 2000);
			}
		},
		methods: {
			getCircleDetails() {
				let that = this;
				util.request(api.getCircleDetailsUrl, {
					id: that.id
				}).then(function(res) {
					if (res.code == 200) {
						that.info = res.data;
						if (res.data.type == 0 || res.data.is_follow) {
							that.getCircleDynamic();
						} else {
							that.isEmpty = true;
							that.isFun = false;
						}
					} else {
						that.tips_title = res.msg;
						that.$refs.tipsPopup.open();
						setTimeout(function() {
							that.$refs.tipsPopup.close();
							that.navBack();
						}, 2000);
					}
				});
			},
			getCircleDynamic() {
				let that = this;
				that.loadStatus = 'loading';
				that.isEmpty = false;
				util.request(api.getCircleDynamicUrl, {
					id: that.id,
					type: that.baridx,
					page: that.page
				}).then(function(res) {
					that.isFun = true;
					if (res.data && res.data.data.length) {
						that.list = that.list.concat(res.data.data);
						that.page = res.data.current_page;
						that.loadStatus = 'more';
					} else if (that.page == 1) {
						that.isEmpty = true;
						that.loadStatus = 'more';
					} else {
						that.loadStatus = 'no-more';
					}
					console.log(that.loadStatus);
				});
				
			},
			joinCircle() {
				let that = this;
				if (that.info.type == 1 && !that.info.is_follow) {
					that.$refs.joinPopup.open();
				} else if (that.info.type == 1 && that.info.is_follow) {
					uni.showModal({
						title: '确认要退出 ' + that.info.name + ' 吗？',
						content: '注：退出后如需重新加入圈子需再次消耗对应积分',
						success: function(res) {
							if (res.confirm) that.followCircle();
						}
					});
				} else {
					that.followCircle();
				}
			},
			followCircle() {
				let that = this;
				util.request(api.followCircleUrl, {
					id: that.id,
					is_follow: that.info.is_follow,
				}, 'POST').then(function(res) {
					if (res.code == 200) {
						if (that.info.type == 1 && !that.info.is_follow) {
							that.$refs.joinPopup.close();
							that.getCircleDynamic();
						}
						that.info.is_follow = !that.info.is_follow;
						if (that.info.type == 1 && !that.info.is_follow) {
							that.list = [];
							that.page = 1;
							that.isEmpty = true;
							that.isFun = false;
						}
					} else {
						that.tips_title = res.msg;
						that.$refs.tipsPopup.open();
						setTimeout(function() {
							that.$refs.tipsPopup.close();
						}, 2000);
					}
				});
			},
			closeJoinPopup() {
				this.$refs.joinPopup.close();
			},
			barClick(e) {
				if (this.isFun) {
					this.baridx = e.currentTarget.dataset.idx;
					this.isFun = false;
					this.list = [];
					this.page = 1;
					this.getCircleDynamic();
				}
			},
			likeclick(e) {
				this.list[e.idx].is_like = e.is_like;
				this.list[e.idx].like_count = e.like_count;
			},
			navigateToFun(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: '/pages/' + url
				})
			},
			navBack() {
				let currentRoutes = getCurrentPages();
				if (currentRoutes.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/tabbar/index'
					})
				}
			},
			shareClick(e) {
				if(!e) this.$refs.sharePopup.close()
				if(e) this.$refs.sharePopup.open();
			},
		},
		onReachBottom() {
			if (this.list.length) {
				this.page = this.page + 1;
				this.getCircleDynamic();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			let frontColor = "#ffffff";
			var trans = (e.scrollTop > 350 ? 350 : e.scrollTop) / 350;
			if (trans >= 1) {
				frontColor = "#000000";
			}
			this.navbarTrans = trans;
			uni.setNavigationBarColor({
				frontColor: frontColor,
				backgroundColor: "#ffffff",
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onShareAppMessage: function() {},
		onShareTimeline(res) {
			return {
				title: app.globalData.shareTitle
			}
		},
	}
</script>

<style>
	@import url("/static/css/note/circle.css");
</style>